<template>
    <v-data-table :hover="true" v-model:expanded="expanded" :headers="headers" :items="ttsCatalogList" item-value="id"
        show-expand :fixed-header="true" :loading="ttsCatalogList == null" :height="tableHeight">
        <template v-slot:expanded-row="{ columns, item }">
            <div :colspan="columns.length">
                <p><strong>资源ID：</strong>{{ item.id }}</p>
                <p><strong>接口地址：</strong>{{ item.relatePath }}</p>
                <p><strong>文件大小：</strong>{{ item.size }}</p>
                <p><strong>更新时间：</strong>{{ item.updateAt }}</p>
                <p><strong>关联单词：</strong>{{ item.word }}</p>
                <p><strong>关联单词ID：</strong>{{ item.wordId }}</p>
            </div>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-icon @click="playAudioResource(item)" class="me-2" icon="mdi-play" 
            :color="playingResourceId==item.id&&audioPlaying?'green':'black'"></v-icon>
            <v-icon class="me-2" icon="mdi-refresh" ></v-icon>
            <v-icon class="me-2" icon="mdi-delete-outline"></v-icon>
        </template>
    </v-data-table>
</template>

<script>
import { getWordTTSCatalog } from '@/api/adminResource';
import { formatTimestamp } from '@/util/ruoyi';

export default {
    props: {
        tableHeight: {
            type: Number, default: 500
        }
    },
    data() {
        return {
            expanded: [],
            headers: [
                // { title: "资源ID", align: "start", key: "id",width:120 },
                { title: "语音内容", align: "start", key: "text" },
                { title: "文件Hash名", align: "start", key: "fileName" },
                { title: "文件绝对路径", align: "start", key: "absolutePath" },
                { title: "发音名称", align: "start", key: "voiceName", width: 120 },
                { title: "创建日期", align: "start", key: "createAt", width: 120 },
                { title: "操作", align: "start", key: "actions", width: 120 },
            ],
            ttsCatalogList: [],
            audioInstance:null,
            audioPlaying:false,
            playingResourceId:null
        }
    },
    unmounted() {
        if (this.audioInstance != null) {
            this.audioInstance.pause()
            this.audioInstance = null
            this.audioPlaying=false
            this.playingResourceId=null
        }
    },
    methods: {
        showWordTTSCatalog(word) {
            this.ttsCatalogList = null
            getWordTTSCatalog(word).then(resp => {
                this.ttsCatalogList = []
                if (resp.data == null) return
                for (let index = 0; index < resp.data.length; index++) {
                    const element = resp.data[index];
                    let rowData = this.dataItemProcess(element)
                    this.ttsCatalogList.push(rowData)
                }
            })
        },
        dataItemProcess(item) {
            let rowData = {}
            rowData.id = item.id
            rowData.text = item.text
            rowData.fileName = item.fileName
            rowData.absolutePath = item.absolutePath
            rowData.createAt = formatTimestamp(item.joinAt)
            rowData.updateAt=formatTimestamp(item.updateAt)
            rowData.voiceName = item.voiceName
            rowData.relatePath=item.relatePath
            rowData.word=item.word
            rowData.wordId=item.wordId
            return rowData
        },
        playAudioResource(resource){
            if(resource==null)return
            let url=resource.relatePath
            if(url==null||url=='')return
            if(this.playingResourceId==resource.id&&this.audioPlaying){
                this.audioInstance.pause()
                this.audioInstance = null
                this.audioPlaying=false
                this.playingResourceId=null
                return
            }
            if(this.audioInstance!=null)this.audioInstance.pause()
            this.audioPlaying=false
            this.audioInstance=null
            this.audioInstance=new Audio(url)
            this.audioInstance.play()
            this.audioPlaying=true
            this.playingResourceId=resource.id
            this.audioInstance.onended = () => { 
                this.audioInstance = null
                this.audioPlaying=false
            }
        }
    }
}
</script>

<style scoped></style>